<template>
  <div id="chartdiv"></div>
</template>

<script setup>
// 后期维护，可参考地址：https://www.amcharts.com/demos/zooming-to-countries-map/

import '@/assets/js/amcharts/index.js'
import '@/assets/js/amcharts/map.js'
import '@/assets/js/amcharts/geodata/worldLow.js'
import '@/assets/js/amcharts/geodata/Animated.js'

function draw() {
  am5.ready(function () {
    // Create root element
    // https://www.amcharts.com/docs/v5/getting-started/#Root_element
    var root = am5.Root.new('chartdiv')

    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
    root.setThemes([am5themes_Animated.new(root)])

    // Create the map chart
    // https://www.amcharts.com/docs/v5/charts/map-chart/
    // setting rotationX to -154.8 makes the map Pacific-centered
    var chart = root.container.children.push(
      am5map.MapChart.new(root, {
        panX: 'rotateX',
        panY: 'none',
        projection: am5map.geoNaturalEarth1(),
        rotationX: -154.8
      })
    )

    // Create main polygon series for countries
    // https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
    var polygonSeries = chart.series.push(
      am5map.MapPolygonSeries.new(root, {
        geoJSON: am5geodata_worldLow
      })
    )

    polygonSeries.mapPolygons.template.setAll({
      tooltipText: '{name}',
      fillOpacity: 0.8
    })

    var colorSet = am5.ColorSet.new(root, {})

    var i = 0
    polygonSeries.mapPolygons.template.adapters.add('fill', function (fill, target) {
      if (i < 10) {
        i++
      } else {
        i = 0
      }
      var dataContext = target.dataItem.dataContext
      if (!dataContext.colorWasSet) {
        dataContext.colorWasSet = true
        var color = am5.Color.saturate(colorSet.getIndex(i), 0.3)
        target.setRaw('fill', color)
        return color
      } else {
        return fill
      }
    })

    polygonSeries.mapPolygons.template.states.create('hover', { fillOpacity: 1 })

    var graticuleSeries = chart.series.push(am5map.GraticuleSeries.new(root, {}))
    graticuleSeries.mapLines.template.setAll({
      stroke: root.interfaceColors.get('alternativeBackground'),
      strokeOpacity: 0.1
    })

    // Add zoom control
    // https://www.amcharts.com/docs/v5/charts/map-chart/map-pan-zoom/#Zoom_control
    var zoomControl = chart.set('zoomControl', am5map.ZoomControl.new(root, {}))
    zoomControl.homeButton.set('visible', false)
    // 隐藏-缩小键
    zoomControl.minusButton.set('visible', false)
    // 隐藏-放大键
    zoomControl.plusButton.set('visible', false)

    // Set clicking on "water" to zoom out
    chart.chartContainer.get('background').events.on('click', function () {
      chart.goHome()
    })

    // chart.legend.showEntries = false // 启用隐藏图形的选项

    // Make stuff animate on load
    chart.appear(1000, 100)
  }) // end am5.ready()
}
onMounted(() => {
  draw()
})
</script>

<style lang="less" scoped>
#chartdiv {
  width: 100%;
  height: 100%;
}
</style>
